<template>
<view class="container">
	<view class="shim"></view>
	<!-- 个人信息 -->
	<view class="padding">
		<view class="profile-banner padding-all box-shadow">
			<view class="profile-banner-avatar border-circle border-radius">
				<image class="profile-banner-cover border-radius"
					src="/static/v2_qb8b4c.png"
					mode="aspectFill" />
				<view class="profile-banner-text">旋风小子</view>
			</view>
			<uni-grid class="sec-top"
				:column="4"
				:showBorder="false"
				:square="false">
				<uni-grid-item>
					<view class="profile-item">
						<view class="profile-item-stat text-primary">{{ info.likeNum || 0 }}</view>
						<view class="profile-item-text">点赞</view>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="profile-item">
						<view class="profile-item-stat text-primary">{{ info.postNum || 0 }}</view>
						<view class="profile-item-text">收藏</view>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="profile-item">
						<view class="profile-item-stat text-primary">{{ info.discussionNum || 0 }}</view>
						<view class="profile-item-text">评论</view>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="profile-item">
						<view class="profile-item-stat text-primary">{{ info.questionNum || 0 }}</view>
						<view class="profile-item-text">转发</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
	</view>
	<!-- Tab -->
	<view class="tab-view sec-top">
		<view class="tab-view-item"
			:id="0"
			:data-current="0"
			:class="{ 'active': active == 'base' }"
			@click="onTabClick('base')">
			<text class="tab-view-item--text">动态</text>
		</view>
		<view class="tab-view-item"
			:id="1"
			:data-current="1"
			:class="{ 'active': active == 'faq' }"
			@click="onTabClick('faq')">
			<text class="tab-view-item--text">求解答</text>
		</view>
		<view class="tab-view-item"
			:id="2"
			:data-current="2"
			:class="{ 'active': active == 'record' }"
			@click="onTabClick('record')">
			<text class="tab-view-item--text">笔记</text>
		</view>
		<view class="tab-view-item"
			:id="3"
			:data-current="3"
			:class="{ 'active': active == 'answer' }"
			@click="onTabClick('answer')">
			<text class="tab-view-item--text">回答</text>
		</view>
		<view class="tab-view-item"
			@click="onTabClick('search')">
			<text class="iconfont icon-search"
				style="font-size: 18px;"></text>
		</view>
	</view>
	<!-- 主体 -->
	<swiper :current="tabIndex"
		class="swiper-box"
		style="flex: 1;"
		:duration="300"
		@change="onSwiperChange">
		<!-- 动态 -->
		<swiper-item style="overflow-y: auto;">
			<uni-list :border="false">
				<base-card v-for="item in baseList"
					:key="item.id"
					:item="item"
					@on-item="(type) => onItemClick('base', type, item)">
				</base-card>
			</uni-list>
			<view v-show="showText" class="empty-text sec-top">{{ text }}</view>
		</swiper-item>
		<!-- 求解答 -->
		<swiper-item style="overflow-y: auto;">
			<uni-list :border="false">
				<faq-card v-for="item in faqList"
					:key="item.id"
					:item="item"
					@on-item="(type) => onItemClick('faq', type, item)">
				</faq-card>
			</uni-list>
			<view v-show="fshowText" class="empty-text sec-top">{{ ftext }}</view>
		</swiper-item>
		<!-- 笔记 -->
		<swiper-item style="overflow-y: auto;">
			<uni-list :border="false">
				<note-card v-for="item in noteList"
					:key="item.id"
					:item="item"
					@on-item="(type) => onItemClick('record', type, item)">
				</note-card>
			</uni-list>
			<view v-show="nshowText" class="empty-text sec-top">{{ ntext }}</view>
		</swiper-item>
		<!-- 回答 -->
		<swiper-item style="overflow-y: auto;">
			<uni-list :border="false">
				<answer-card v-for="item in answerList"
					:key="item.id"
					:item="item"
					@on-item="(type) => onItemClick('faq', type, item)">
				</answer-card>
			</uni-list>
			<view v-show="ashowText" class="empty-text sec-top">{{ atext }}</view>
		</swiper-item>
	</swiper>
</view>
</template>

<script>
import BaseCard from '../tabbar/base-card.vue';
import FaqCard from '../tabbar/faq-card.vue';
import NoteCard from './note-card.vue';
import AnswerCard from './answer-card.vue';
import { getMyClassInfo, postBaseList, getBaseStat } from '@/api/index.js';
export default {
	components: {
		BaseCard,
		FaqCard,
		NoteCard,
		AnswerCard
	},
	data() {
		return {
			active: 'base',
			tabIndex: 0,
			tabs: ['base', 'faq', 'record', 'answer'],
			userId: null,
			classId: null,
			baseList: [],
			offset: 0,
			limit: 20,
			showText: false,
			text: '加载中...',
			noMore: false,
			faqList: [],
			foffset: 0,
			flimit: 20,
			fshowText: false,
			ftext: '加载中...',
			fnoMore: false,
			noteList: [],
			noffset: 0,
			nlimit: 20,
			nshowText: false,
			ntext: '加载中...',
			nnoMore: false,
			answerList: [],
			aoffset: 0,
			alimit: 20,
			ashowText: false,
			atext: '加载中...',
			anoMore: false,
		}
	},
	onShow() {
		const token = uni.getStorageSync('X-Auth-Token');
		if (!token) {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		}
		this.reset();
		this.freset();
		this.nreset();
		this.areset();
		getMyClassInfo().then(res => {
			let id = res.data && res.data.id;
			this.classId = id;
			let userInfo = uni.getStorageSync('userInfo');
			this.userId = userInfo && userInfo.id;
			this.getBaseList(this.offset, this.limit);
			this.getFaqList(this.foffset, this.flimit);
			this.getMyNoteList(this.noffset, this.nlimit);
			this.getMyAnswerList(this.aoffset, this.alimit);
		});
		getBaseStat().then(res => {
			this.info = res.data;
		});
	},
	methods: {
		getMyNoteList(offset, limit) {
			this.nshowText = true;
			postBaseList({
				pageNum: offset,
				pageSize: limit,
				classRoomId: this.id,
				type: 'question',
				isShowPosts: 1
			}).then(res => {
				let total = res.total || 0;
				if (total <= (offset + 1) * limit) {
					this.nnoMore = true;
					this.ntext = '已经到底啦～';
				}
				this.noteList = this.noteList.concat(res.list || []);
			});
		},
		getMyAnswerList(offset, limit) {
			this.ashowText = true;
			postBaseList({
				pageNum: offset,
				pageSize: limit,
				classRoomId: this.id,
				type: 'question',
				isShowPosts: 1
			}).then(res => {
				let total = res.total || 0;
				if (total <= (offset + 1) * limit) {
					this.anoMore = true;
					this.atext = '已经到底啦～';
				}
				this.answerList = this.answerList.concat(res.list || []);
			});
		},
		getFaqList(offset, limit) {
			this.fshowText = true;
			postBaseList({
				pageNum: offset,
				pageSize: limit,
				classRoomId: this.id,
				type: 'question',
				isShowPosts: 1
			}).then(res => {
				let total = res.total || 0;
				if (total <= (offset + 1) * limit) {
					this.fnoMore = true;
					this.ftext = '已经到底啦～';
				}
				this.faqList = this.faqList.concat(res.list || []);
			});
		},
		getBaseList(offset, limit) {
			this.showText = true;
			postBaseList({
				pageNum: offset,
				pageSize: limit,
				classRoomId: this.id,
				type: 'discussion',
				isShowPosts: 0
			}).then(res => {
				let total = res.total || 0;
				if (total <= (offset + 1) * limit) {
					this.noMore = true;
					this.text = '已经到底啦～';
				}
				this.baseList = this.baseList.concat(res.list || []);
			});
		},
		reset() {
			this.baseList = [];
			this.offset = 0;
			this.limit = 20;
			this.noMore = false;
			this.showText = false;
			this.text = '加载中...';
		},
		freset() {
			this.faqList = [];
			this.foffset = 0;
			this.flimit = 20;
			this.fnoMore = false;
			this.fshowText = false;
			this.ftext = '加载中...';
		},
		nreset() {
			this.noteList = [];
			this.noffset = 0;
			this.nlimit = 20;
			this.nnoMore = false;
			this.nshowText = false;
			this.ntext = '加载中...';
		},
		areset() {
			this.answerList = [];
			this.aoffset = 0;
			this.alimit = 20;
			this.anoMore = false;
			this.ashowText = false;
			this.atext = '加载中...';
		},
		onItemClick(module, type, item) {
			uni.navigateTo({
				url: `/pages/${ module }/${ type }?id=${ item.id }&from=base-profile`
			});
		},
		onTabClick(type) {
			this.active = type
			switch(type) {
				case 'faq':
					this.tabIndex = 1;
					break;
				case 'record':
					this.tabIndex = 2;
					break;
				case 'answer':
					this.tabIndex = 3;
					break;
				case 'search':
					uni.navigateTo({
						url: '/pages/subject/result?from=base-profile'
					})
					break;
				default:
					this.tabIndex = 0;
					break;
			}
		},
		onSwiperChange(e) {
			const index = e.target.current || e.detail.current;
			this.tabIndex = index;
			this.active = this.tabs[index];
		}
	},
	// 下拉刷新
	onReachBottom() {
		if (this.active == 'faq') {
			if (!this.fnoMore) {
				this.foffset = this.foffset + 1;
				this.getFaqList(this.foffset, this.flimit);
			}
		}
		else if (this.active == 'record') {
			if (!this.nnoMore) {
				this.noffset = this.noffset + 1;
				this.getMyNoteList(this.noffset, this.nlimit);
			}
		}
		else if (this.active == 'answer') {
			if (!this.anoMore) {
				this.aoffset = this.aoffset + 1;
				this.getMyAnswerList(this.aoffset, this.alimit);
			}
		}
		else {
			if (!this.noMore) {
				this.offset = this.offset + 1;
				this.getBaseList(this.offset, this.limit);
			}
		}
	},
}
</script>
